<template>
  <view>
    <zh-sheet style="z-index: 2" :padding="[0, 0]" :margin="[0, 30]">
      <zh-input v-model="ruleForm.userName" :height="100" :transprent="false" prefix="tmicon-user-fill" placeholder="请输入用户名"></zh-input>
    </zh-sheet>
    <zh-sheet style="z-index: 2" :padding="[0, 0]" :margin="[0, 30]">
      <zh-input v-model="ruleForm.userPassword" :height="100" :transprent="false" password prefix="tmicon-lock-fill" placeholder="请输入密码"></zh-input>
    </zh-sheet>
    <zh-sheet v-if="showImgCode" style="z-index: 2" :padding="[0, 0]" :margin="[0, 30]">
      <zh-input :inputPadding="[24, 0, 0, 0]" v-model="ruleForm.imgCode" :height="100" :transprent="false" prefix="tmicon-safety-certificate" placeholder="请输入图片验证码">
        <template v-slot:right>
          <img :src="imgSrc" @click="getCode" mode="" class="login-content-code" />
        </template>
      </zh-input>
    </zh-sheet>
    <zh-button style="z-index: 2" block label="登录" @click="signIn" :loading="loading.signIn" :disabled="loading.signIn"></zh-button>
    <zh-message ref="messageRef" :width="350" :height="350" :duration="2000"></zh-message>
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import loginUsername from '../../loginUsername';
export default defineComponent({
  name: 'loginAccount',
  setup() {
    const { signIn, ruleForm, getCode, imgSrc, showImgCode, messageRef, loading } = loginUsername();
    return {
      signIn,
      ruleForm,
      getCode,
      imgSrc,
      showImgCode,
      messageRef,
      loading,
    };
  },
});
</script>

<style scoped lang="scss">
.login-content-code {
  display: block;
  padding-left: 24rpx;
  width: 240rpx;
  height: 100rpx;
}
</style>
